草庐IT

Vue3 组件

全部标签

javascript - 如何使用 Vue.js 预加载图像?

我有一个使用Vue.Js(带有webpack)的小应用程序。我有一个过渡部分。当用户单击按钮时,内容将发生变化。这是一个带有IMG子元素的简单DIV元素。我的问题是当用户单击按钮时,下一张图像将实时加载并且速度很慢,所以我需要以某种方式预加载这些图像。我尝试了不同的方法,但无法实现预加载图像。问题:页面显示时只有第一张图片是DOM的一部分,其他图片不会加载。好的,这是正常行为。我无法通过对图像数组(PreloadingimageswithJavaScript)使用简单的for循环来预加载图像,因为每个请求都会通过唯一的查询字符串()来请求图像。因此预加载的图像名称将与请求的不匹配。我尝

javascript - 从组件触发路由 Action

我有一个组件,我想触发路由级别的操作,以便我可以转换到不同的路由。App=Ember.Application.create();App.Router.map(function(){});App.IndexRoute=Ember.Route.extend({actions:{complete:function(){//Thisneverhappens:(console.log('Triggeredcomplete!');}}});App.MyAreaComponent=Ember.Component.extend({actions:{clickMyButton:function(){co

javascript - 具有大型数据集的组件仅在 IE11/Edge 上运行缓慢

考虑下面的代码。想象一下rows.length在此示例中,每个数组大约有8列,将达到2000或更多的任何值。我使用此代码的更扩展版本来呈现表格的一部分,这一直是我的Web应用程序的瓶颈。varGridBody=React.createClass({render:function(){return{this.props.Rows.map((row,rowKey)=>{returnthis.renderRow(row,rowKey);})};},renderRow:function(row,rowKey){return{row.map((col,colKey)=>{returnthis.r

javascript - 自行销毁组件 - angular2

我的组件(main-cmp)包含来自数据库的行。对于行,我为例如创建另一个组件。行-cmpmain-cmp从数据库中请求数据,并解析为在row-cmp中,我声明了delete()函数,它向我的后端调用http请求。现在,当来自请求的响应为真时,我想销毁所选行的row-cmp。这可能吗? 最佳答案 这是不支持的。我建议添加一个事件发射器@Output()delete:EventEmitter=newEventEmitter();然后添加一个事件处理程序,从数据数组中删除该项目 关于java

javascript - 如何检查一个对象是否是一个 Vue 组件?

是否有可靠的方法来检查对象是否为Vue.js组件? 最佳答案 您可以使用instanceof,如下代码:varisVueComp=vuecompinstanceofVue如果isVueComp为真,则它是一个Vue.js组件,否则不是。您还可以使用vuecomp.prototype.constructor,它将返回对创建实例对象的Object构造函数的引用。检查这个fiddle. 关于javascript-如何检查一个对象是否是一个Vue组件?,我们在StackOverflow上找到一个

javascript - 组件在更新时消失

我正在我的ReactNative应用程序中实现一个单词搜索工具。我有一个MobX商店,wordStore。每个文本更改都会通过setFilter操作触发数据库查询。正如我从控制台调试输出中看到的那样,这一切都在幕后工作。但是,一旦触发任何更新,WordList组件似乎就会消失,即,如果我设置默认过滤器字符串,它会显示列表中的匹配项目,但一旦任何文本发生更改,它就会立即消失消失。有什么我想念的吗?奇怪的是WordList.render()方法即使不可见也会执行。编辑:渲染数组的.toString()方法在包含组件中工作正常,但奇怪的是迭代数组也显示相同的行为,在更新时消失。包含组件:co

javascript - 通过 ajax 调用在 Vue.js 中填充下拉列表

我希望能够进行ajax调用并使用返回的结果使用vue.js生成下拉选项.我可以这样做:{{option.text}}Selected:{{selected}}.js文件newVue({el:'...',data:{selected:'A',options:[{text:'One',value:'A'},{text:'Two',value:'B'},{text:'Three',value:'C'}]}})但我不想让我的选项硬编码,而是来自ajax调用。Ajax调用看起来像这样:functionpullEmployees(){vareventOwnerId=$('#eventOwner')

javascript - 人们更喜欢使用 React 组件的构造函数而不是 componentWillMount 有什么原因吗?

我发现使用生命周期方法componentWillMount来设置初始状态...componentWillMount(){this.state={comments:[]};}...比使用构造函数稍微简单一些。即因为当您使用构造函数时,您有调用super()。constructor(){super();this.state={comments:[]};}不仅如此,如果您的组件传递了props和/或state,那么您还必须手动传递它们。constructor(props,state){super(props,state);...}我在使用componentWillMount时没有遇到任何问题

javascript - Angular 4 : changing url, 但未呈现组件

我正在尝试使用routerLink="selected"从一个组件链接一个组件constroutes:Routes=[{path:'',children:[{path:'account',component:AccountComponent,children:[{path:'selected',component:SelectedComponent,},],},]}];@NgModule({imports:[RouterModule.forChild(routes)],exports:[RouterModule],})exportclassAccountSettingsRoutingM

javascript - 在ajax调用后 react 组件状态变化但不重新渲染组件

在这一部分,用户可以对帖子发表评论。在服务器端检查并收到数据后,我尝试更改this.state.comments值。这样就完成了。但问题是,它并没有改变组件的评论部分。我已经阅读了之前关于重新渲染的问题,所以请不要标记为重复。下面是代码:$.post("requests.php",{requestKey:'newComment',commenterUser:commenterUser,commenterEmail:commenterEmail,theComment:theComment,pnum:pnum},function(data,status,xhr){if(status=='s